<template>
  <div class="problem-container">
    <h1 class="title">遇到问题</h1>
    <div class="problem-item" @click="goToSelfAppeal">
      <div class="icon" style="background-color: #409EFF;">
        <i class="el-icon-document"></i>
      </div>
      <div class="text">
        <p class="name">自助申诉</p>
        <p class="desc">申诉手机号或邮件地址不可用、查询申诉进度</p>
      </div>
      <div class="arrow">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="problem-item" @click="goToFreezeAccount">
      <div class="icon" style="background-color: #F56C6C;">
        <i class="el-icon-user"></i>
      </div>
      <div class="text">
        <p class="name">冻结账号</p>
        <p class="desc">若怀疑账号被盗，可紧急冻结账号</p>
      </div>
      <div class="arrow">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="problem-item" @click="goToUnfreezeAccount">
      <div class="icon" style="background-color: #67C23A;">
        <i class="el-icon-user"></i>
      </div>
      <div class="text">
        <p class="name">解冻账号</p>
        <p class="desc">解除安全风险后，可解冻账号</p>
      </div>
      <div class="arrow">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="problem-item" @click="goToCommonQuestions">
      <div class="icon" style="background-color: #909399;">
        <i class="el-icon-question"></i>
      </div>
      <div class="text">
        <p class="name">常见问题</p>
        <p class="desc">解决账号使用过程中的常见问题</p>
      </div>
      <div class="arrow">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    // 自助申诉跳转方法
    const goToSelfAppeal = () => {
      router.push({ name:'selfAppeal' })
    }
    // 冻结账号跳转方法
    const goToFreezeAccount = () => {
      router.push({ name: 'freezeAccount' })
    }
    // 解冻账号跳转方法
    const goToUnfreezeAccount = () => {
      router.push({ name: 'unfreezeAccount' })
    }
    // 常见问题跳转方法
    const goToCommonQuestions = () => {
      router.push({ name: 'commonQuestions' })
    }
    return {
      goToSelfAppeal,
      goToFreezeAccount,
      goToUnfreezeAccount,
      goToCommonQuestions
    }
  }
}
</script>

<style scoped>
.problem-container {
  padding: 20px;
}
.title {
  text-align: center;
  margin-bottom: 20px;
}
.problem-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}
.icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-right: 10px;
}
.text {
  flex: 1;
}
.name {
  font-size: 16px;
  margin-bottom: 5px;
}
.desc {
  font-size: 14px;
  color: #606266;
}
.arrow {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>